<template>
	<view>
		<!-- 聊天列表 -->
		<scroll-view id="scrollId" scroll-y :scroll-top="style.scrollTop" 
		:scroll-with-animation="true" :style="{height:style.contentH+'px'}">
			<block v-for="(item,index) in chatlist":key="index">
				<chatList :item="item" :index="index"></chatList>
			</block>
		</scroll-view>
		<!-- 输入框 -->
		<chatSearch  @submit="submit"></chatSearch>
	</view>
</template>

<script>
	import chatSearch from '../../components/chat-list/chat-search.vue'
	import time from '../../common/time.js'
	import chatList from '@/components/chat-list/chat-list'
	export default {
		data() {
			return {
				text: '',
				chatlist: [],
				style:{
					contentH:0,//设置固定高度
					scrollTop:0,
					chatListH:0
				}
			}
		},
		components:{
			chatList,
			chatSearch
		},
		onLoad(){
			this.initdata();
			this.getData();
		},
		onReady(){
			this.scrollButtom()
		},
		methods: {
			initdata(){
				//获取系统信息同步接口
				try {
				  const res = uni.getSystemInfoSync();
				  this.style.contentH=res.windowHeight-uni.upx2px(100);
				} catch (e) {
				    // error
				}
				
			},
			scrollButtom(){
				//获取元素的对象实列
				const q = uni.createSelectorQuery().in(this);
				q.select('#scrollId').boundingClientRect();
				q.selectAll('.chat-list').boundingClientRect()
				q.exec((res)=>{
					res[1].forEach((item)=>{
						this.style.chatListH+=item.height;
					})
				
					if(this.style.chatListH>this.style.contentH){
						this.style.scrollTop=this.style.chatListH;
					}
					this.style.chatListH=90;
				})
			},
			getData(){
				let arr=[{
							toppic: '../../static/img/userpic/18.jpg',
							time: '1581134881',
							isme: true,
							type: 'text',
							desc:'今天是个好日子'
						},
						{
							toppic: '../../static/img/userpic/12.jpg',
							time: '1587870947',
							isme: false,
							type: 'text',
							desc:'我们一起出来放风筝'
						},
						{
							toppic: '../../static/img/userpic/18.jpg',
							time: '1587870945',
							isme: true,
							type: 'image',
							imgpic:'../../static/img/datapic/10.jpg'
						},
						{
							toppic: '../../static/img/userpic/12.jpg',
							time: '1587870947',
							isme: false,
							type: 'text',
							desc:'我们一起出来放风筝'
						},
						{
							toppic: '../../static/img/userpic/12.jpg',
							time: '1587870947',
							isme: false,
							type: 'text',
							desc:'拟定日子'
						},
					];
					for(let i=0;i<arr.length;i++){
					arr[i].timeDate=time.gettime.getChatTime(arr[i].time,i>0?arr[i-1].time:0)
					}
					
					this.chatlist=arr;
			},
			submit(text){
				let now=new Date().getTime();
				let obj={
						toppic: '../../static/img/userpic/12.jpg',
						timeDate: time.gettime.getChatTime(now,this.chatlist[this.chatlist.length-1]),
						isme: false,
						time:now,
						type: 'text',
						desc:text
					}
					this.chatlist.push(obj)
//必须放在$nextTick中  dom操作完成后 会将回调函数延迟在下一次dom更新数据后调用  数据更新 在dom渲染后  在重新执行这个函数
				this.$nextTick(()=>{
					this.scrollButtom()
				})
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	

	
</style>
